﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Hn_map.aspx.cs" Inherits="HNQXYJ.HN_Map.Hn_map" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=ddb44554222452c6769bfa32a8793107&v=1.1&services=true"></script>   
    <%--<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=false"></script>--%>
    <link href="../CSS/Map.css" rel="stylesheet" type="text/css" />
    <link href="../CSS/MapPop.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        //js代码开始
        $(function () {
            createMap(113.661717, 34.760406); //113.661717,34.760406
            setMapEvent();
            addMapControl();


            //点击江苏省激发事件显示城市列表
            $("#list").click(function () {
                $("#cityList").css("top", "34px").css("left", "2px").show();
            });

            //点击列表右边的叉关闭城市列表
            $("#closeCityList").click(function () {
                $("#cityList").hide();
            });

            loadLeftTopData();
            //加载数据
            loadData();

            //终端数据可能要变化所以每隔一定时间就重新加载一次数据，
            //定时间隔加载数据
            setInterval("loadData()", 10000)

            $("#send").click(function () {
                var phone = $("#phoneHidden").val();
                var msg = $("#sendMsg").val();
                var sendTimes = $("#sendTimes").val();
                if (msg == "" || msg.length < 3) {
                    alert("发送内容不能为空或太短");
                    return;
                }
                $.post("../BLL/TerminalAsh.ashx", { "sendaction": "sendMsg", "phone": phone, "sendMsg": msg, "sendTimes": sendTimes }, function (data, status) {
                    if (status == "success") {
                        if (data == "ok") {
                            alert("信息已经发出！");
                        }
                    }

                });

            });

        });                  //js代码结束



        //创建地图函数
        function createMap(lng, lat) {
            var map = new BMap.Map("dituContent"); //在页面容器中创建一个地图
            var point = new BMap.Point(lng, lat); //定义一个中心点的坐标
            map.centerAndZoom(point, 9); //设定地图的中心点和坐标并将地图显示在地图容器中
            window.map = map; //将map设为全局变量
            // addMarker(point, 10);
            //map.setZoom(50);

        }

        //地图事件设置函数
        function setMapEvent() { 
            map.enableDragging(); // 启用地图拖拽事件
            map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
            map.enableDoubleClickZoom(); //启用地图双击放大事件
            map.enableKeyboard(); //启用键盘上下左右键移动地图
        }

        //地图控件添加函数：
        function addMapControl() {
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl();
            map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl();
            map.addControl(ctrl_ove);
            //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl();
            map.addControl(ctrl_sca);
        }

        // 编写自定义函数,创建标注http://dev.baidu.com/wiki/static/map/API/examples/images/ico-1-9.png
        function addMarker(point, index) {
            var img = "";
            if (terminal[index].Statuss == "在线"  ) {
                img = "../images/green.png";
            } else if (terminal[index].Statuss == "离线" ) {
                img = "../images/red.png";
            } else {
                alert("状态错误");
            }
            var myIcon = new BMap.Icon(img, new BMap.Size(30, 36),
                                {
                                    offset: new BMap.Size(15, 36), //标注的偏移，让标注点的下端指向经纬度坐标
                                    infoWindowOffset: new BMap.Size(15, 0) //信息框的偏移  让信息框的下断点指向标注的上端
                                }
             );

            var marker = new BMap.Marker(point, { icon: myIcon });
            map.addOverlay(marker);

            //给标注添加鼠标滑过事件
            marker.addEventListener("mouseover", function () {
                //alert(mapDataArray[0]);
                var infoWindow = new BMap.InfoWindow();
                var detailInfow = '<div>终端号码：' + terminal[index].Phone + '<br/>所在地：' + terminal[index].TownName + '<br/>气象信息员：' + terminal[index].Leader + '<br/>联系电话：' + terminal[index].LeaderPhone + '<br/>在线状态：' + terminal[index].Statuss + '<br/>添加日期：' + terminal[index].AddDate + '</div>'
                infoWindow.setContent(detailInfow);
                this.openInfoWindow(infoWindow, map.getCenter());
            });

            //给标注添加鼠标点击事件
            marker.addEventListener("click", function () {
                // 弹出遮罩层的信息发送框
                var phone = terminal[index].Phone;
                $("#phoneHidden").val(phone);
                var villageName = terminal[index].TownName;
                $("#villageName").val(villageName);
                ShowDiv('MyDiv', 'fade');
            });
        }

        //弹出隐藏层
        function ShowDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'block';
            document.getElementById(bg_div).style.display = 'block';
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
            // bgdiv.style.height = $(document).height();
            $("#" + bg_div).height($(document).height());
        };
        //关闭弹出层
        function CloseDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'none';
            document.getElementById(bg_div).style.display = 'none';
        };

        //全屏显示
        function toFull() {
            if (window.name == "fullscreen") return;
            var a = window.open("", "fullscreen", "fullscreen=yes");
            a.location = window.location.href;
            window.opener = null;
            window.close();
        }

        function loadLeftTopData() {
            //左上角数据列表加载
            $.post("../BLL/City.ashx", { "action": "GetCityLists" }, function (data, status) {
                if (status == "success") {
                    var city = $.parseJSON(data);
                    window.city = city;
                    $("#citiesLists").empty();
                    for (var i = 0; i < city.length; i++) {
                        var lng = city[i].Lng;
                        var lat = city[i].Lat;
                        var sCode = city[i].SelfCode;
                        var a = '<a href="#" name="tm"  lng= ' + lng + ' lat=' + lat + ' selfcode=' + sCode + ' >' + city[i].Name + '</a>' + '            ';
                        $("#citiesLists").append(a);

                    }
                    //点击每个终端要移动地图，使被点击的终端位于地图的中心
                    $("a[name='tm']").each(function () {
                        $(this).click(function () {
                            var lng = $(this).attr("lng");
                            var lat = $(this).attr("lat");
                            var selfcode = $(this).attr("selfcode");
                            map.panTo(new BMap.Point(lng, lat));
                            //点击某个城市时将 该市下的线载入列表
                            $.post("../BLL/County.ashx", { "action": "GetCountyList", "cityCode": selfcode }, function (data, status) {
                                if (status == "success") {
                                    var couty = $.parseJSON(data);

                                    window.couty = couty;
                                    $("#countiesList").empty();
                                    for (var i = 0; i < couty.length; i++) {
                                        var lng = couty[i].Lng;
                                        var lat = couty[i].Lat;
                                        var a = '<a href="#" name="tm"  lng= ' + lng + ' lat=' + lat + ' >' + couty[i].Name + '</a>' + '     ';
                                        $("#countiesList").append(a);
                                    }

                                    //点击某个县将地图中心移动到该县
                                    $("a[name='tm']").each(function () {
                                        $(this).click(function () {
                                            var lng = $(this).attr("lng");
                                            var lat = $(this).attr("lat");
                                            var point = new BMap.Point(lng, lat);//确定一个点
                                            map.panTo(new BMap.Point(lng, lat));
                                            map.centerAndZoom(point, 15);//移动地图的同时放大
                                        });
                                    }); //
                                }

                            });

                        });
                    });
                }
            });
        }

        //加载终端表中的数据，在地图上显示图标
        function loadData() {
       
           
           //页面数据加载
            $.post("../BLL/TerminalAsh.ashx", { "action": "getDataForMap" }, function (data, status) {
                if (status == "success") {
                    var Terminal = $.parseJSON(data);
                    window.terminal = Terminal;
                    //alert(Terminal.length);
                    $("#terminalList").empty();
                    for (var i = 0; i < Terminal.length; i++) {
                        var lng = terminal[i].Lng;
                        var lat = terminal[i].Lat;
                        var points = new BMap.Point(lng, lat);
                        addMarker(points, i);

                        //将终端放入（左上角）列表中
//                        var a = '<a href="#" name="tm"  lng= ' + lng + ' lat=' + lat + ' >' + terminal[i].TownName + '</a>' + '     ';

//                        $("#terminalList").append(a);
                    }

                    //点击每个终端要移动地图，使被点击的终端位于地图的中心
//                    $("a[name='tm']").each(function () {
//                        $(this).click(function () {
//                            var lng = $(this).attr("lng");
//                            var lat = $(this).attr("lat");
//                            map.panTo(new BMap.Point(lng, lat));

//                        });
//                    });
                }
                else {
                    alert("数据加载失败");
                }

            });

        }

    </script>

</head>
<body>
    <form id="form1" runat="server">

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                        <td class="rtbg">
                            <span id="list" style=" cursor:pointer;">河南省
                                <img alt=""  src="../images/icon1.gif" align="absmiddle" /></span><img src="../images/icon2.gif"
                                    align="absmiddle" />终端在线<img src="../images/icon3.gif" align="absmiddle" />终端离线
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div id="dituContent" style=" width:100%; height:580px;" >
                           </div>
                        </td>
                    </tr>
     </table>
     <%--页面顶部结束--%>
     <%--城市列表显示框开始--%>
     <div id="cityList" style=" display:none;  position:absolute; z-index:100;" >
        <table width="300" height="200" border="0" cellspacing="0" cellpadding="0" class="borbg">
            <tr>
                <td class="cslist" height="27">
                    <span>河南省</span><img id="closeCityList" src="../images/icon5.gif" align="absmiddle">
                </td>
            </tr>
            <tr>
                <td height="27" class="lb_mc">
                    <div id="citiesLists">
                    </div>
                    <hr />
                </td>
            </tr>
            <tr>
                <td height="27" class="lb_mc">
                    <div id="countiesList">
                     </div>           
                    
                </td>
            </tr>
            <tr>
                <td class="lb_mc" valign="top">
                   <div id="terminalList"> 
                   
                   </div>
                </td>
            </tr>
        </table>
  </div>
   <%--城市列表显示框结束--%>
   <%--弹出遮罩层和发送信息框 开始--%>
 <div id="fade" class="black_overlay">
 </div>
<div id="MyDiv" class="white_content" >
  <%--      <div style="text-align: right; cursor: default; height: 40px;">
           <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
        </div>--%>
         <table width="448" border="0" cellspacing="0" cellpadding="0" align="center" class="bg" >
            <tr>
                <td height="40" class="tpt">
                    <img src="../images/tpt.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td height="25" align="center">
                    <img src="../images/tline.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td class="nr">
                    村名：<input name="村名" id="villageName" type="text" class="bor" style="width: 335px;" />
                </td>
            </tr>
            <tr>
                <td class="nr">
                    发送内容：<span style="font-size: 12px; color: #FF0000">（字数不超过350个)</span><br>
                    <%--<textarea  id="sendMsg" name="textarea" rows="" cols="" class="bor2" ></textarea>--%>
                    <asp:TextBox ID="sendMsg" runat="server" class="bor2" TextMode="MultiLine" MaxLength="350"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="nr">
                    发送次数：<%--<input id="sendTimes" name="sendTimes" type="text" size="3" class="bor" />--%>
                    <asp:TextBox ID="sendTimes" runat="server" size="3" class="bor" Text="1"></asp:TextBox>
                    次
                </td>
            </tr>
            <tr>
                <td height="60" align="center">
                    <img src="../images/tqx.gif" alt="" onclick="CloseDiv('MyDiv','fade')" />&nbsp;&nbsp;&nbsp;&nbsp;<img id="send" src="../images/tfs.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td height="20">
                </td>
            </tr>
        </table>
       <input type="hidden" id="phoneHidden" />
        
 </div>
 <%--弹出遮罩层和发送信息框 结束--%>
    </form>
</body>
</html>
